<script setup>
import './assets/global.scss'
import { ref, computed, onMounted, nextTick, onUnmounted } from 'vue'
import { ChatLineRound, ChatDotRound, Service, Document, InfoFilled, House, User, Position, Loading, Monitor, Fold,Expand, } from '@element-plus/icons-vue'
// import { ElMessage  } from 'element-plus';
import buildInfo from './config/build-info.json'
import { useRoute } from 'vue-router'

const isCollapse = ref(false)
const route = useRoute()
// 使用构建时生成的时间
const buildTime = ref(buildInfo.buildTime)
const version = ref(buildInfo.version)
const activeMenu = computed(() => route.path)
const isMobile = ref(false)

const handleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 检查是否为移动设备
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  isCollapse.value = isMobile.value
}

// 切换菜单
const toggleMenu = () => {
  isCollapse.value = !isCollapse.value
  
  console.log('isCollapse:', isCollapse.value)
  
  // 获取移动菜单切换按钮
  const mobileMenuToggle = document.querySelector('.mobile-menu-toggle')
  
  // 如果是移动设备，切换 sidebar-expanded 类
  if (isMobile.value && mobileMenuToggle) {
    mobileMenuToggle.classList.toggle('sidebar-expanded')
  }
}

// 监听窗口大小变化
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})

// 使用 ref 来定义响应式数据
const imageLoaded = ref(true);

function loadFallbackIcon() {
  imageLoaded.value = false; // 图片加载失败时，显示备用组件
}

</script>

<template>
  <el-container class="layout-container">
    <!-- 移动端菜单按钮 -->
    <div class="mobile-menu-toggle" @click="toggleMenu" v-if="isMobile">
      <el-icon :size="24">
        <component :is="isCollapse ? Expand : Fold" />
      </el-icon>
    </div>

    <!-- 侧边栏 isCollapse ?samill-aside : big-aside  :class="{ 'mobile-aside': isMobile, 'mobile-aside-hidden': isMobile && isCollapse, }" -->
    <el-aside class="sidebar" :width="isCollapse ? '64px' : '200px'" :class="{
      'mobile-aside': isMobile,
      'mobile-aside-hidden': isMobile && isCollapse,
      [isCollapse ? 'samill-aside' : 'big-aside']: true
    }">

      <!-- 侧边栏顶部logo -->
      <div class="logo-container">
        <img class="logo-img" src="@/assets/img/白色logo.png" alt="Logo">
      </div>

      <!-- 侧边菜单和路由右边页面 -->
      <el-menu :collapse="isCollapse" class="sidebar-menu" :default-active="activeMenu" router>

        <!-- 第一个菜单主页 -->
        <el-menu-item index="/">
          <el-icon>
            <House />
          </el-icon>
          <template #title>Home</template>
        </el-menu-item>

        <!-- 第二个菜单 产品需求模版-->
        <el-menu-item index="/Docment">
          <el-icon>
            <Document />
          </el-icon>
          <template #title>需求模版</template>
        </el-menu-item>

        <!-- 第三个菜单 XAI -->
        <el-menu-item index="/xai">
          <el-icon>
            <!-- <Service /> -->
            <img src="@/assets/xai.ico" alt="SpaceX" width="24" height="24" />
          </el-icon>
          <template #title>X.AI</template>
        </el-menu-item>

        <!-- 第四个菜单 Gemini -->
        <el-menu-item index="/gmini">
          <el-icon>
            <!-- <Monitor /> -->
            <img src="@/assets/img/gmini.png" alt="Google" width="21" height="21" />
          </el-icon>
          <template #title>GeminiAI</template>
        </el-menu-item>

        <!-- 第5个菜单 xunfei -->
        <el-menu-item index="/xunfei">
          <el-icon>
            <!-- <Monitor /> -->
            <img src="@/assets/xunfe.ico" alt="讯飞星火大模型" width="25" height="25" />
          </el-icon>
          <template #title>SparkAI</template>
        </el-menu-item>

        <!-- 第6个菜单 baidu Ernie ai 文心一言 -->
        <el-menu-item index="/ernie">
          <el-icon>
            <img v-if="imageLoaded" src="@/assets/img/wenxin.png" alt="文心一言4.0" width="auto  " height="22"
              @error="loadFallbackIcon" />
            <ChatLineRound v-else />
          </el-icon>
          <template #title>ErnieAI</template>
        </el-menu-item>

        <!-- 第7个菜单  通义千问AI -->
        <el-menu-item index="/qwen">
          <el-icon>
            <img v-if="imageLoaded" src="@/assets/img/qwen.svg" alt="通义千问AI" width="auto  " height="22"
              @error="loadFallbackIcon" />
            <ChatLineRound v-else />
          </el-icon>
          <template #title>QwenAI</template>
        </el-menu-item>

        <!-- 第7个菜单 ChatGPT
        <el-menu-item index="/chatgpt">
          <el-icon>
            <img v-if="imageLoaded" src="@/assets/gpt.ico" alt="OpenAI" width="25" height="25"
              @error="loadFallbackIcon" />
            <ChatLineRound v-else />
          </el-icon>
          <template #title>ChatgptAI</template>
        </el-menu-item> -->
        
                <!-- 第7个菜单 ChatGPT -->
        <el-menu-item index="/chatgpt">
          <el-icon>
            <img v-if="imageLoaded" src="@/assets/gpt.ico" alt="OpenAI" width="25" height="25"
              @error="loadFallbackIcon" />
            <ChatLineRound v-else />
          </el-icon>
          <template #title>ChatgptAI</template>
        </el-menu-item>

        <!-- 第8个菜单 deeopseek -->
        <el-menu-item index="/deepseek">
          <el-icon>
            <img v-if="imageLoaded" src="@/assets/img/deepseek.png" class="tablogo deepseek" calt="DeepSeekAi" width="25"
              height="auto" @error="loadFallbackIcon" />
            <Document v-else />
          </el-icon>
          <template #title>DeepSeekAI</template>
        </el-menu-item>


        <!-- 第后1个菜单 关于 -->
        <el-menu-item index="/about">
          <el-icon>
            <InfoFilled />
          </el-icon>
          <template #title>About</template>
        </el-menu-item>
      </el-menu>

      <div class="collapse-btn" @click="handleCollapse">
        <el-icon>
          <component :is="isCollapse ? 'Expand' : 'Fold'" />
              <!-- <component :is="isCollapse ? ' ElIconExpand' : 'ElIconFold'" /> -->
        </el-icon>
      </div>
      
    </el-aside>

    <!-- 右侧 主要内容区域 -->
    <el-container class=" main-container">
      <el-main class="main-content" :class="{ [isCollapse ? 'samill-content' : 'big-content']: true }">
        <!-- <keep-alive> <router-view /></keep-alive> -->
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>

      <!-- 右侧底部版权主要内容区域 -->
      <el-footer height="30px" class="footer">
        <span> <a style="text-decoration: none;" href="https://beian.miit.gov.cn/">粤ICP备19131154号</a> 2024@-
          Professional
          Power Supply Manufacturer &nbsp; V{{ version }} (Last Build: {{ buildTime
          }})</span>
      </el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss">
* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important
}

 

.tablogo{
    filter: brightness(120%) contrast(110%) saturate(110%);
}



@import '@/assets/style/app.scss';

 
/* 增加饱和度 */
.deepseek {
    filter: saturate(600%) !important; /* 调整到接近白色 */
}
</style>
